<script setup lang="ts">
import { ref } from 'vue';
import { NButton, NForm, NFormItem, NInput } from 'naive-ui';

// 定义组件属性
interface Props {
  formData?: {
    username: string;
    nickname: string;
    bio: string;
  };
  loading?: boolean;
}

// 定义组件事件
interface Emits {
  (e: 'update:formData', value: Props['formData']): void;
  (e: 'save'): void;
}

// 组件属性和事件
const props = withDefaults(defineProps<Props>(), {
  formData: () => ({ username: '', nickname: '', bio: '' }),
  loading: false
});

const emit = defineEmits<Emits>();

// 表单引用
const formRef = ref<InstanceType<typeof NForm>>();

// 验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应在3-20个字符之间', trigger: 'blur' }
  ],
  nickname: [
    { required: false, message: '请输入昵称', trigger: 'blur' },
    { max: 50, message: '昵称长度不能超过50个字符', trigger: 'blur' }
  ],
  bio: [
    { required: false, message: '请输入个人简介', trigger: 'blur' },
    { max: 200, message: '个人简介长度不能超过200个字符', trigger: 'blur' }
  ]
};

// 保存基本信息
const handleSaveProfile = async () => {
  if (!(await formRef.value?.validate())) return;
  emit('save');
};

// 监听表单数据变化，同步到父组件
const handleInputChange = (field: keyof Props['formData'], value: string) => {
  const newFormData = { ...props.formData, [field]: value };
  emit('update:formData', newFormData);
};
</script>

<template>
  <NForm ref="formRef" :model="formData" :rules="rules" label-placement="left" :label-width="80">
    <NFormItem label="用户名" path="username">
      <NInput
        v-model:value="formData.username"
        placeholder="请输入用户名"
        @update:value="handleInputChange('username', $event)"
      />
    </NFormItem>
    <NFormItem label="昵称" path="nickname">
      <NInput
        v-model:value="formData.nickname"
        placeholder="请输入昵称"
        @update:value="handleInputChange('nickname', $event)"
      />
    </NFormItem>
    <NFormItem label="个人简介" path="bio">
      <NInput
        v-model:value="formData.bio"
        type="textarea"
        placeholder="请输入个人简介"
        :autosize="{ minRows: 3, maxRows: 6 }"
        @update:value="handleInputChange('bio', $event)"
      />
    </NFormItem>
    <div class="form-actions">
      <NButton type="primary" :loading="loading" @click="handleSaveProfile">保存基本信息</NButton>
    </div>
  </NForm>
</template>

<style scoped lang="scss">
// 表单按钮区域
.form-actions {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;

  .n-button {
    min-width: 80px;
    padding: 8px 24px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &:active:not(:disabled) {
      transform: translateY(0);
    }
  }
}

// 表单元素样式优化
.n-form-item {
  margin-bottom: 24px;
  transition: all 0.3s ease;

  &:focus-within {
    transform: translateX(4px);
  }

  &__label {
    font-weight: 500;
    color: #333;
    font-size: 14px;
  }
}

.n-input {
  transition: all 0.3s ease;
  border-radius: 6px;

  &:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.15);
  }
}
</style>
